<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>安+健康中心数据监控系统</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-reset.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src='js/jquery-2.1.1.min.js'></script>
	<script type="text/javascript" src='js/bootstrap.min.js'></script>
	<script type="text/javascript" src='js/echarts.min.js'></script>
	<script type="text/javascript" src='js/index.js'></script>
	<script type="text/javascript" src='js/map.js'></script>
	<script src="https://webapi.amap.com/loca?v=1.2.0&key=4b0e3bbb1a8b6cb6f4f19184f202f2c4"></script>
</head>
<body>
	<div class='content'>
		<div class='head'>
			<img src="img/head.png" class='head_img'>
		</div>
		<div class='top'>
		<div class='con_left grid'>
				<div class='user_age grid'>
					<div class='grid_top'>用户年龄分布</div>
					<div id='user_age' style="height: 100%"></div>
				 </div>
				 <div class='user_age grid'>
					<div class='grid_top'>用户性别比例</div>
					<div id='gender' style="height: 100%"></div>
				 </div>
				  <div class='user_age grid'>
					<div class='grid_top'>健康情况</div>
					<div class='health' id='health1' style="height: 100%"></div>
					<div class='health' id='health2' style="height: 100%"></div>
					<div class='health' id='health3' style="height: 100%"></div>
				 </div>
				 <div class='user_age grid'>
					<div class='grid_top'>运动步数</div>
					<div id='walking' style="height: 100%"></div>
				 </div>
				
		</div>
		<div class='con_cont'>
			<ul class='user_all'>
				<!-- <li>	
					<span>用户总量</span>
					<b>65,679</b>
				</li>
				<li>	
					<span>今日新增</span>
					<b>65,679</b>
				</li>
				<li>	
					<span>服务总量</span>
					<b>65,679</b>
				</li>
				<li>	
					<span>服务新增</span>
					<b>65,679</b>
				</li> -->
			</ul>
			<div id='cityMap' style="height: 100%;width: 100%"></div>
		</div>
		<div class='con_right grid'>
				<div class='user_age grid'>
					<div class='grid_top'>VIP人数增涨统计</div>
					<div id='vip_up' style="height: 100%"></div>
				 </div>
				 <div class='user_age grid' style="position: relative;">
					<div class='grid_top'>SOS救助统计</div>
					<ul class='grid_right sos'>
						<li>今日呼叫:<span>0</span>人</li>
						<li>累积呼叫:<span>0</span>人</li>
					</ul>
					<div id='sos' style="height: 100%"></div>
				 </div>
				 <div class='user_age grid' style="position: relative;">
					<div class='grid_top'>睡眠数据</div>
					<ul class='grid_right sleep'>
						<li><em style="background:#24cef9"></em>8h以上:<span>0</span>人</li>
						<li><em style="background:#ed7d31"></em>6-8h:<span>0</span>人</li>
						<li><em style="background:#fee433"></em>4-6h:<span>0</span>人</li>
						<li><em style="background:#f82f28"></em>4h以下:<span>0</span>人</li>
					</ul>
					<div id='sleep' style="height: 100%"></div>
				 </div>
		</div>
		</div>
		<div class="bottoms">
			<div class='bot' style="margin-left: 0;">
				<div class='user_age grid'>
					<div class='grid_top'>心率统计</div>
					<ul class='grid_right heart'>
						<!-- <li>正常:<span>2000</span>人</li>
						<li>过速:<span>2000</span>人</li>
						<li>过缓:<span>2000</span>人</li>
						<li>不齐:<span>2012300</span>人</li> -->
					</ul>
					<div id='heart' style="height: 100%"></div>
				 </div>
			</div>
			<div class='bot'>
				<div class='user_age grid '>
					<div class='grid_top'>血压统计</div>
					<ul class='grid_right pressure'>
						<!-- <li>正常:<span>2000</span>人</li>
						<li>I级:<span>2000</span>人</li>
						<li>II级:<span>2000</span>人</li>
						<li>III级:<span>2012300</span>人</li>
						<li>低血压:<span>2012300</span>人</li> -->
					</ul>
					<div id='pressure' style="height: 100%"></div>
				 </div>
			</div>
			<div class='bot'>
				<div class='user_age grid '>
					<div class='grid_top'>血氧统计</div>
					<ul class='grid_right oxygen'>
						<!-- <li>正常:<span>2000</span>人</li>
						<li>低血氧:<span>2000</span>人</li> -->
					</ul>
					<div id='oxygen' style="height: 100%"></div>
				 </div>
			</div>
			<div class='bot' style="margin-right: 0;">
				<div class='user_age grid '>
					<div class='grid_top'>心电统计</div>
					<ul class='grid_right ecg'>
						<li>正常:<span>0</span>人</li>
						<li>异常:<span>0</span>人</li>
					</ul>
					<div id='ecg' style="height: 100%"></div>
				 </div>
			</div>
			
		</div>
		
	</div>
</body>


<script type="text/javascript">
$(function() {
	
	$(".con_left .grid").css('height',$(".grid").width()/1.9 + 'px');
	
	$(".con_cont").css('height',$(".con_cont").width()*0.44+'px');

	$('.bottoms .grid').css('height',$(".bottoms .grid").width()/2.1 + 'px');


	var http = 'http://47.93.23.253:8090';

	$.ajax({
	    type: 'POST',
	    url: http+'/api/data/userData',
	    dataType: 'json',
	    success(data) {
	       if(data.msg == '成功'){
	       		user_age(data.data.age)
	       		vip_up(data.data.vip)
	       		sos(data.data.sos)
	       		walking(data.data.step)
	       		var user_alls='';
	       		$('.user_all').html('');
	       		for(var i = 0; i < data.data.userCount.list.length; i++){
	       			user_alls+= '<li><span>'+data.data.userCount.list[i]+'</span><b>'+data.data.userCount.data[i]+'</b></li>'
	       		}
	       		$('.user_all').append(user_alls);
	       		
	       		var sosUser = '';  //sos
	       		$('.sos').html("");
	       		for(var i = 0; i <data.data.sosUser.list.length; i++){
	       			sosUser += '<li><em></em>'+data.data.sosUser.list[i]+':<span>'+data.data.sosUser.data[i]+'</span>人</li>'
	       		}
	       		$('.sos').append(sosUser);
	       }
	    },

	});

	

	$.ajax({
	    type: 'POST',
	    url: http+'/api/data/healthStatusData',
	    dataType: 'json',
	    success(data) {
	       if(data.msg == '成功'){
	       	health(data.data)
	       }
	    },

	});

	$.ajax({
	    type: 'POST',
	    url: http+'/api/data/healthData',
	    dataType: 'json',
	    success(data) {
	       if(data.msg == '成功'){
	       		gender(data.data.sex)
	       		pressure(data.data.blood)
	       		ecg(data.data.xindian)
	       		oxygen(data.data.xueyang)
	       		sleep(data.data.sleep)
	       		heart(data.data.heartBeat)
	       		var pressures = '';  //血压
	       		$('.pressure').html("");
	       		for(var i = 0; i <data.data.blood.list.length; i++){
	       			pressures += '<li><em></em>'+data.data.blood.list[i]+':<span>'+data.data.blood.data[i]+'</span>人</li>'
	       		}
	       		$('.pressure').append(pressures);

	       		var hearts = '';  //心率
	       		$('.heart').html("");
	       		for(var i = 0; i <data.data.heartBeat.list.length; i++){
	       			hearts += '<li><em></em>'+data.data.heartBeat.list[i]+':<span>'+data.data.heartBeat.data[i]+'</span>人</li>'
	       		}
	       		$('.heart').append(hearts);

	       		var oxygens = '';  //血氧
	       		$('.oxygen').html("");
	       		for(var i = 0; i <data.data.xueyang.list.length; i++){
	       			oxygens += '<li><em></em>'+data.data.xueyang.list[i]+':<span>'+data.data.xueyang.data[i]+'</span>人</li>'
	       		}
	       		$('.oxygen').append(oxygens);

	       		var ecgs = '';  //心电
	       		$('.oxygen').html("");
	       		for(var i = 0; i <data.data.xindian.list.length; i++){
	       			ecgs += '<li><em></em>'+data.data.xindian.list[i]+':<span>'+data.data.xindian.data[i]+'</span>人</li>'
	       		}
	       		$('.oxygen').append(ecgs);


	       		
	       }
	    },

	});
	var districts;
	$.ajax({
        type: 'POST',
        url: http+'/api/data/locationData',
        dataType: 'json',
        success(data) {
           if(data.msg == '成功'){
                var data_json = [];
                for(var i = 0; i < data.data.location.list.length; i++){
                    var j = {
                        center:data.data.location.data[i],
                        name:data.data.location.list[i]
                    }
                    data_json.push(j)
                }
                districts = data_json;
                var map = Loca.create('cityMap', {
			        mapStyle: 'amap://styles/darkblue',
			        zoom: 4,
			        center: [107.4976, 32.1697]
			    });
			    var layer = Loca.visualLayer({
			        eventSupport: true,    // selectStyle 配置需要开启 eventSupport: true
			        container: map,
			        type: 'point',
			        shape: 'circle'
			    });

			    layer.on('mousemove', function (ev) {
			        // 事件类型
			        var type = ev.type;
			        // 当前元素的原始数据
			        var rawData = ev.rawData;
			        // 原始鼠标事件
			        var originalEvent = ev.originalEvent;

			        openInfoWin(map.getMap(), originalEvent, {
			            '名称': rawData.name,
			            '位置': rawData.center
			        });
			    });

			    layer.on('mouseleave', function (ev) {
			        closeInfoWin();
			    });

			    layer.setData(districts, {
			        lnglat: 'center'
			    });

			    layer.setOptions({
			        style: {
			            radius: 5,
			            color: '#4fc2ff',
			            borderColor: '#ffffff',
			            borderWidth: 1.5,
			            opacity: 0.8
			        },
			        selectStyle: {
			            radius: 6,
			            color: '#ffe30a'
			        }
			    });

			    layer.render();
           }
        },

    });
	
});
</script>
</html>